<template>
  <div class="project-bar-data">
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane
        label="工程量环比增长"
        name="first"
      >
        <div
          id="project-num"
          class="echart-box"
        ></div>
      </el-tab-pane>
      <el-tab-pane
        label="工程金额环比增长"
        name="second"
      >
        <div
          id="project-money"
          class="echart-box"
        ></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "ProjectNumMoney",
  props: {
    msg: String,
  },
  data() {
    return {
      activeName: "first",
    };
  },
  created() {
    this.$nextTick(() => {
      this.generateEchart();
    });
  },
  methods: {
    handleClick() {
      this.$nextTick(() => {
        this.generateEchart();
      });
    },
    generateEchart() {
      let rentalEchart = "";
      if (this.activeName === "first") {
        rentalEchart = echarts.init(
          document.getElementById("project-num")
        );
      }
      if (this.activeName === "second") {
        rentalEchart = echarts.init(document.getElementById("project-money"));
      }
      let option = this.generateOptions();
      rentalEchart.setOption(option);
    },
    generateOptions() {
      let xData = [];
      for (let i = 1; i <= 12; i++) {
        xData.push(i + "月");
      }
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
          top: "10%",
        },
        grid: {
          containLabel: true,
        },
        xAxis: {
          type: "category",
          xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };

      return option;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "../common/css/common";
.project-bar-data {
  width: 100%;
  height: 300px;
  background: #ffffff;
  box-sizing: border-box;
}
.echart-box {
  width: 100%;
  height: 236px;
  background: #ffffff;
}
::v-deep .el-tabs__header{
  margin:0;
}
</style>
